<template>
  <div id="table-manage">
    <ContentField>
      <template v-slot:content-field-card-name>餐桌管理</template>
      <template v-slot:content-field-card-button>
        <el-button type="success" round @click="addTableBtnClick">
          增添餐桌
        </el-button>
      </template>
      <template v-slot:content-field-card-body>
        <div id="table-manage-body" style="position: relative">
          <el-table
            :data="table_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="id" label="桌号" />
            <el-table-column prop="maxNum" label="容量（人）" />
            <el-table-column prop="statusStr" label="状态" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="editTableBtnClick(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="deleteTableBtnClick(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
    <!-- 餐桌信息编辑dialog -->
    <el-dialog v-model="tableEditDialogVisible" title="修改餐桌信息">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curTable"
        style="max-width: 460px"
      >
        <el-form-item label="桌号">
          <el-input v-model="curTable.id" disabled />
        </el-form-item>
        <el-form-item label="最大容量">
          <el-input v-model="curTable.max_num" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tableEditDialogSubBtnClick">
            提交修改
          </el-button>
          <el-button @click="tableEditDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 餐桌信息添加dialog -->
    <el-dialog v-model="tableAddDialogVisible" title="添加餐桌">
      <el-form
        label-position="right"
        label-width="100px"
        :model="curTable"
        style="max-width: 460px"
      >
        <el-form-item label="桌号">
          <el-input v-model="curTable.id" disabled />
        </el-form-item>
        <el-form-item label="最大容量">
          <el-input v-model="curTable.max_num" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tableAddDialogSubBtnClick">
            提交
          </el-button>
          <el-button @click="tableAddDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, reactive, ref } from "vue";
import { ElNotification } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    store.dispatch("get_all_table", {
      token: store.state.user.jwt_token,
    });

    let table_list = computed(() => {
      let res = store.state.table.table_list;
      res.forEach((element) => {
        if (element.status == 0) {
          element.statusStr = "空闲";
        } else if (element.status == 1) {
          element.statusStr = "用餐中";
        } else {
          element.statusStr = "待清理";
        }
      });
      return res;
    });

    let curTable = reactive({});

    let bindCurTable = (table) => {
      curTable.id = table.id;
      curTable.maxNum = table.maxNum;
      curTable.max_num = table.maxNum;
      curTable.status = table.status;
      curTable.statusStr = table.statusStr;
    };
    let clearCurTable = () => {
      curTable.id = "";
      curTable.maxNum = "";
      curTable.max_num = "";
      curTable.status = "";
      curTable.statusStr = "";
    };

    let tableEditDialogSubBtnClick = () => {
      store.dispatch("modify_table_inf", {
        token: store.state.user.jwt_token,
        id: curTable.id,
        max_num: curTable.max_num,
        status: curTable.status,
        success(resp) {
          if (resp.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "餐桌修改成功",
              offset: 100,
            });
            tableEditDialogVisible.value = false;
            store.dispatch("get_all_table", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "餐桌修改失败" + resp.message,
              offset: 100,
            });
          }
        },
      });
    };
    let tableEditDialogVisible = ref(false);
    let tableAddDialogSubBtnClick = () => {
      store.dispatch("add_table", {
        token: store.state.user.jwt_token,
        max_num: curTable.max_num,
        status: 0,
        success(resp) {
          if (resp.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "餐桌添加成功",
              offset: 100,
            });
            tableAddDialogVisible.value = false;
            store.dispatch("get_all_table", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "餐桌添加失败" + resp.message,
              offset: 100,
            });
          }
        },
      });
    };
    let tableAddDialogVisible = ref(false);

    let addTableBtnClick = () => {
      clearCurTable();
      tableAddDialogVisible.value = true;
    };
    let deleteTableBtnClick = (row) => {
      bindCurTable(row);
      store.dispatch("delete_table", {
        token: store.state.user.jwt_token,
        table_id: curTable.id,
        success(resp) {
          if (resp.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "餐桌删除成功",
              offset: 100,
            });
            store.dispatch("get_all_table", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "餐桌删除失败" + resp.message,
              offset: 100,
            });
          }
        },
      });
    };
    let editTableBtnClick = (row) => {
      bindCurTable(row);
      tableEditDialogVisible.value = true;
    };
    return {
      addTableBtnClick,
      deleteTableBtnClick,
      editTableBtnClick,
      table_list,
      curTable,
      Delete,
      Edit,
      tableEditDialogSubBtnClick,
      tableEditDialogVisible,
      tableAddDialogSubBtnClick,
      tableAddDialogVisible,
    };
  },
};
</script>

<style scoped></style>
